<template>
	<view class="mask">
		<u-popup v-model="regBool"  mode="center" :mask-close-able="false">
			<view class="mwrap">
				<input class="search-name" v-model="changeValue" :maxlength="16" placeholder="(输入队名,不超过8个字)" />
				<view class="wx-name">{{engName}}</view>
				<image class="renge" mode="widthFix" :src="imgPath+'/static/big/teamName.png'"></image>
				<view class="confirm" @click="createTeam"></view>
				<image class="wait" @click="wait" mode="widthFix" :src="imgPath+'/static/close.png'"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import http from "@/src/http";
	export default {
		name:"TeamName",
		data() {
			return {
				regBool: false,
				changeValue: ''
			};
		},
		props:{
			engName:{
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'create'
			}
		},
		methods:{
			//获取字符串的真实长度
			getLen(str) {
				return str.replace(/[\u0391-\uFFE5]/g,"AA").length;
			},
			hasEmoji(str) {
				var reg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig; // 这里的正则表达式可根据需要进行修改
				return reg.test(str);
			},
			createTeam() {
				if(!this.changeValue || this.changeValue.trim() == ''){
					wx.showToast({
						icon: "none",
						title: '请输入队名',
					});
					return
				}else if(this.hasEmoji(this.changeValue)){
					wx.showToast({
						icon: "none",
						title: '不能输入表情等非法字符',
					});
					return
				}else if(this.getLen(this.changeValue) > 16){
					wx.showToast({
						icon: "none",
						title: '最多输入8个字符',
					});
					return
				}
				const params = {
					action: this.type || 'create',
					teamName: this.changeValue
				}
				http.teamManage(params).then(res=>{
					if(res.code == 20018){
						wx.showToast({
							icon: "none",
							title: '队名可能存在敏感词，请检查后重新设置',
						});
						return
					}
					if(res.code == 20013){
						wx.showToast({
							icon: "none",
							title: res.message,
						});
						return
					}
					this.regBool = false;
					this.$emit('success',res.data);
				},()=>{
					this.regBool = false;
					this.$emit('success',{});
				})
			},
			wait(){
				this.regBool = false
			}
		}
	}
</script>

<style lang="scss" scoped>

.mwrap{
	width: 750rpx;
	height: 780rpx;
	display: flex;
	justify-content: center;
	position: relative;
	.renge{
		width: 541rpx;
		position: relative;
	}
	.search-name {
		position: absolute;
    top: 171rpx;
    left: 165rpx;
    width: 397rpx;
    height: 53rpx;
    background-color: transparent;
    text-align: center;
    z-index: 6;

		/deep/.uni-input-placeholder {
			font-size: 28rpx;
			color: #888;
			text-align: center;
		}
	}
	.wx-name{
		position: absolute;
    top: 395rpx;
    left: 165rpx;
    width: 385rpx;
    height: 40rpx;
    text-align: center;
    z-index: 6;
	}
	.confirm{
		position: absolute;
    z-index: 666;
    width: 220rpx;
    height: 70rpx;
    left: 255rpx;
    border-radius: 35rpx;
    top: 566rpx;
	}
	.wait{
		position: absolute;
    z-index: 666;
    width: 100rpx;
    height: 70rpx;
    left: 315rpx;
    border-radius: 35rpx;
    bottom: 0;
	}
}

</style>